<template>
  <div class="Main">
    <div class="MainTitle">分销员数据列表</div>
    <div class="MianContent">
      <div style="display: flex; align-items: center">
        <!-- 类型：
        <a-select
          style="width: 180px; margin-right: 20px"
          allowClear
          v-model="settle_status"
          placeholder="请选择类型"
          @change="handleChange"
        >
          <a-select-option
            :value="item.value"
            v-for="(item, index) in orderStatus"
            :key="index"
          >
            {{ item.text }}
          </a-select-option>
        </a-select> -->
        创建日期：
        <div class="MainTopActionThree">
          <a-range-picker
            style="width: 300px"
            :ranges="dataRange"
            :show-time="false"
            format="YYYY-MM-DD"
            @change="onDateChange"
          />
        </div>
        <div class="flex align-center" style="margin: 0 20px;">
          <a-input v-model="order_no" @input="clearInput" allowClear placeholder="请输入信息搜索"></a-input>
          <a-button @click="searchBtn" type="primary">搜索</a-button>
        </div>
      </div>
      <div style="margin-top:20px;">
        <h3 v-if="promoter_mid">{{`所属分销员：${nickname}（id:${promoter_mid}）`}} <a-icon style="fontSize:20px;cursor: pointer;" type="close-circle" @click="delPid" /></h3>
        <a-table
          :columns="listfields"
          :data-source="listData"
          :bordered="true"
          :pagination="false"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
        >
          <!-- <div slot="action" slot-scope="row, index">
              <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                  <a-button type="primary" size="small" @click="EditItem(index.id)">详情</a-button>
                  <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteItem(index)">
                      <template slot="title">
                          <p>警告</p>
                          <p>此操作将永久删除该发票, 是否继续?</p>
                      </template>
                      <a-button type="danger" size="small">删除</a-button>
                  </a-popconfirm>
              </div>
          </div> -->
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="type" slot-scope="row, index">
            {{row == 0?'开户':row==1?'充值':row==2?'扣点':''}}
          </div>
          <div slot="status" slot-scope="row, index">
            {{row == 0?'待支付':row==1?'已支付':''}}
          </div>
        </a-table>
        <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import { CommandList } from "@/api/api.js";
import {commandTableList} from '@/views/Columns/Distributor'

export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      listfields:commandTableList, //表头
      currentPage: 1, //当前页码
      total: 0, //定义初始有多少条数据
      keyword: "",
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      listData: [], //表格数据

      orderStatus: [
        {
          text: "开户",
          value: "0",
        },
        {
          text: "充值",
          value: "1",
        },
        {
          text: "扣点",
          value: "2",
        } ],
      settle_status: undefined, //类型
      dataRange: {
        今天: [this.$moment().startOf("day"), this.$moment()],
        昨天: [
          this.$moment().startOf("day").subtract(1, "days"),
          this.$moment().startOf("day").subtract(1, "days"),
        ],
        最近一周: [
          this.$moment().startOf("day").subtract(1, "weeks"),
          this.$moment(),
        ],
        最近两周: [
          this.$moment().startOf("day").subtract(2, "weeks"),
          this.$moment(),
        ],
        最近1个月: [
          this.$moment().startOf("day").subtract(1, "months"),
          this.$moment(),
        ],
        最近3个月: [
          this.$moment().startOf("day").subtract(3, "months"),
          this.$moment(),
        ],
        最近半年: [
          this.$moment().startOf("day").subtract(6, "months"),
          this.$moment(),
        ],
        最近1年: [
          this.$moment().startOf("day").subtract(1, "years"),
          this.$moment(),
        ],
      },
      DateAll: [], //开始和结束时间一起
      selectedRowKeys: [],

      StartDate:'', //开始时间
      EndDate:'', //结束时间
      order_no:'', //订单号搜索

      promoter_mid:null,
      nickname:'',
    };
  },
  computed: {
  },
  created() {},
  mounted() {
    this.GetList();
  },
  methods: {
    // 选择类型
    handleChange(){
      const that = this;
      that.pageno = 1
      that.pagesize = 10
      that.GetList()
    },
    //选择时间
    onDateChange(dates, dateStrings) {
      const that = this;
      that.StartDate = dateStrings[0];
      that.EndDate = dateStrings[1];
      console.log(that.StartDate, that.EndDate);
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList();
    },

    // 搜索按钮
    searchBtn(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    // 清除搜索
    clearInput(){
      const that = this;
      if(that.order_no == ''){
        that.pageno = 1;
        that.pagesize = 10;
        that.GetList()
      }
    },

    // 清除跳转查询
    delPid(){
        const that = this;
        that.promoter_mid = null;
        that.nickname = '';
        that.$route.query.member_id = null;
        that.$route.query.nickname = '';
        that.GetList()
    },

    // 获取数据列表API
    async GetList() {
      var that = this;
      let promoter_mid = that.$route.query.member_id;
      let nickname = that.$route.query.nickname;
      that.promoter_mid = promoter_mid;
      that.nickname = nickname;

      let params = {
        page: that.pageno,
        limit: that.pagesize,
        type:that.settle_status,
        create_time:this.StartDate?`${that.StartDate}~${that.EndDate}`:'',
      };
      if(promoter_mid){
        params.promoter_mid = promoter_mid
      }
      const res = await CommandList(params);
      if (res.data.code == 200) {
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.id;
            item.indexNum = index;
            // item.update_time = that
            //   .$moment(item.update_time * 1000)
            //   .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },


    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRowKeys, "///");
    },
  },
};
</script>

<style scoped lang="less">
.editable-row-operations a {
  margin-right: 12px;
}

.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(0, 158, 238, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .MainTopActionOne {
          margin-right: 30px;

          span {
            margin-right: 20px;
          }
        }

        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }

      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
        
      }
    }
  }
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .custom-slick-arrow {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.4;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.6;
}

// .ant-carousel .slick-slide h3 {
//   color: #fff;
// }
.ant-carousel .slick-dots li button {
  background: #009eee;
}
.ant-carousel .slick-dots li.slick-active button {
  background: #009eee;
}
</style>